<template>
    
    <div id="zhu">
    
    <h1>练习数据的增删改查</h1>
    <div>
      <!-- 提交事件将不再重新加载页面：@submit.prevent="onSubmit" -->
      <form action="" @submit.prevent="onSubmit">
        <label for="name">姓名：</label>
        <input type="text" id="name" name="name" v-model="name">
        <br>
        <label for="age">年龄：</label>
        <input type="number" id="age" name="age" v-model="age">
        <br>
        <label for="gender">性别：</label>
        <input type="radio" id="male" name="gender" value="男" v-model="gender">
        <label for="male">男</label>
        <input type="radio" id="female" name="gender" value="女" v-model="gender">
        <label for="female">女</label>
        <br>
        <label for="email">邮箱：</label>
        <input type="email" id="email" name="email" v-model="email">
        <br>
        <button type="submit" @click="add">添加</button>
        
      </form>

      
      <div>
        <div>
          <input type="text"><button type="submit" @click="query">查询</button>
        </div>
        <div v-for="(item, index) in data" :key="index">
          {{ item.name }} {{ item.age }} {{ item.gender }} {{ item.email }}
          <button type="submit" @click="delete1(index)">删除</button>
          <button type="submit" @click="update(index)">修改</button>
        </div>

        
      </div>
    </div>



    </div>
    
  
</template>

<script>
export default {
  name: '练习数据的增删改查',
  props: {
  
  },
  data() {//数据

    return {//返回值
      name: '',
      age: '',
      gender: '',
      email: '',
      data: [
        {
          name: '张三',
          age: 20,
          gender: '男',
          email: '123@qq.com'
        },
        {
          age: 25,
          gender: '女',
          email: '456@qq.com'
        },
        {
          name: '王五',
          age: 30,
          gender: '男',
          email: '789@qq.com'
        }
      ]
    };
  },
  methods: {//方法
    add() {
      //添加数据
      console.log(this.name, this.age, this.gender, this.email);
      //把数据添加到data数组中
      this.data.push({
        name: this.name,
        age: this.age,
        gender: this.gender,
        email: this.email
      });
    },
    delete1(index) {
      //删除数据
      this.data.splice(index, 1);
    },
    update(index) {
      //修改数据
      //点击修改按钮，弹出修改框，让用户输入修改后的数据，点击确定按钮，将修改后的数据更新到data数组中
      console.log(index);//获取当前点击的索引值
      //弹出修改框
      
      //获取当前点击的索引值，从data数组中获取当前数据
      let item = this.data[index];
      //将当前数据赋值给修改框的输入框
      this.name = item.name;
      this.age = item.age;
      this.gender = item.gender;
      this.email = item.email;
      //点击确定按钮，将修改后的数据更新到data数组中
      //获取修改后的数据
      let newItem = {
        name: this.name,
        age: this.age,
        gender: this.gender,
        email: this.email
      };
      //更新数据
      this.data.splice(index, 1, newItem);
      
    },
    query() {
      //查询数据
      console.log(this.name, this.age, this.gender, this.email);
      //根据输入框的值，从data数组中查询数据
      let newData = [];
      for (let i = 0; i < this.data.length; i++) {
        let item = this.data[i];
        if (this.name && item.name.indexOf(this.name) == -1) {
          continue;
        }
        if (this.age && item.age != this.age) {
          continue;
        }
        if (this.gender && item.gender != this.gender) {
          continue;
        }
        if (this.email && item.email.indexOf(this.email) == -1) {
          continue;
        }
        newData.push(item);
      }
      this.data = newData;
      
    }
  }
}
</script>
<!-- 样式 -->
<style scoped>
  #zhu {
    width: 100vw;
    height: 100vh;
    background-color: #725d5d;
  }
</style>